<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="700px"
    @close="close"
  >
    <el-form ref="form" label-width="80px" :model="form" :rules="rules" label-position="right">
      <el-form-item label="链接名称" prop="title">
        <el-input v-model.trim="form.title"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch
          v-model="form.status"
          active-color="#13ce66"
          :active-text="statusMap[1].text"
          :active-value="statusMap[1].status"
          inactive-color="#ff4949"
          :inactive-text="statusMap[0].text"
          :inactive-value="statusMap[0].status"
        />
      </el-form-item>
      <el-form-item label="顶部显示" prop="is_top">
        <el-switch
          v-model="form.is_top"
          active-color="#13ce66"
          :active-text="statusMap[1].text"
          :active-value="statusMap[1].status"
          inactive-color="#ff4949"
          :inactive-text="statusMap[0].text"
          :inactive-value="statusMap[0].status"
        />
      </el-form-item>
      <el-form-item label="底部显示" prop="is_bottom">
        <el-switch
          v-model="form.is_bottom"
          active-color="#13ce66"
          :active-text="statusMap[1].text"
          :active-value="statusMap[1].status"
          inactive-color="#ff4949"
          :inactive-text="statusMap[0].text"
          :inactive-value="statusMap[0].status"
        />
      </el-form-item>
      <el-form-item label="链接方式">
        <el-radio border @change="forceUpdate" v-model.trim="form.type" v-for="(item) in typeMap" :key="item.type"
                  :value="item.type" :label="item.type">{{ item.text }}
        </el-radio>
      </el-form-item>
      <el-form-item label="栏目列表" v-if="form.type ==1">
        <el-select @change="forceUpdate" v-model.trim="form.column_classify_id">
          <el-option v-for="(item) in columnList" :key="item.id" :value="item.id" :label="item.title"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级导航" v-if="form.type ==1 ">
        <el-switch
          v-model="form.is_sub"
          active-color="#13ce66"
          :active-text="statusMap[1].text"
          :active-value="statusMap[1].status"
          inactive-color="#ff4949"
          :inactive-text="statusMap[0].text"
          :inactive-value="statusMap[0].status"
        />
      </el-form-item>
      <el-form-item label="二级内容" v-if="form.is_sub == 1 && form.type==1">
        <el-radio border v-model.trim="form.son" v-for="(item) in sonMap" :key="item.son" :value="item.son"
                  :label="item.son">{{ item.text }}
        </el-radio>
      </el-form-item>
      <el-form-item label="链接地址" prop="url" v-if="form.type == 2">
        <el-input v-model.trim="form.url" type="url"/>
      </el-form-item>
      <el-form-item label="打开方式" prop="target">
        <el-select @change="forceUpdate" v-model.trim="form.target">
          <el-option v-for="(item) in targetMap" :key="item.target" :value="item.target" :label="item.text"></el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>

import {getFilter, doEdit} from '@/api/manage/nav'

export default {
  name: 'NavManagementEdit',
  data() {
    return {
      form: {},
      rules: {
        title: [
          {required: true, trigger: 'blur', message: '请填写链接名称'},
        ],
        url: [
          {required: true, trigger: 'blur', message: '请输入链接地址'},
          {type: 'url', trigger: 'blur', message: '请输入链接标准地址(http/https)'},
        ],
        target: [{required: true, trigger: 'blur', message: '请选择打开方式'}],
      },
      title: '',
      dialogFormVisible: false,
      columnList: [],
      infoList: [],
      statusMap: [
        {
          status: 0,
          text: '禁用'
        },
        {
          status: 1,
          text: '启用'
        }
      ],
      targetMap: [
        {
          target: '_blank',
          text: '新页面打开'
        },
        {
          target: '_self',
          text: '当前页打开'
        }
      ],
      sonMap: [
        {
          son: 1,
          text: '栏目列表'
        },
        {
          son: 2,
          text: '栏目分类'
        }
      ],
      typeMap: [
        {
          type: 1,
          text: '栏目'
        },
        {
          type: 2,
          text: '固定连接'
        }
      ]

    }
  },
  created() {
    this.getFilter()
  },
  methods: {
    forceUpdate() {
      this.$forceUpdate()
    },
    async getFilter() {
      getFilter().then(response => {
        this.columnList = response.data.columnList
      })
    },
    showEdit(row) {
      if (!row) {
        this.title = '添加'
      } else {
        this.title = '编辑'
        this.form = Object.assign({}, row)
      }
      this.dialogFormVisible = true
    },
    close() {
      this.$refs['form'].resetFields()
      this.form = this.$options.data().form
      this.dialogFormVisible = false
    },
    save() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          const {msg} = await doEdit(this.form)
          this.$baseMessage(msg, 'success', 'vab-hey-message-success')
          this.$emit('fetch-data')
          this.close()
        }
      })
    },
  },
}
</script>
